<!--//临时存放处-Trash-->
<script>
    // const loginForm = document.querySelector('#sign-in-form');
    //
    //
    // loginForm.addEventListener('submit',  async function (e) {
    //     e.preventDefault();
    //     var selectedOption = document.querySelector('input[name="t1"]:checked');
    //     if (!selectedOption) {
    //         alert("请选择登录类型");
    //         return;
    //     }
    //
    //     var loginUrl = '';
    //
    //     if (selectedOption.value === '管理员') {
    //         loginUrl = './api/login/admin';
    //     } else {
    //         loginUrl = './api/login/customer';
    //     }
    //
    //     try {
    //         const response = await axios.post(loginUrl, { username, password });
    //         alert('登录成功！');
    //         window.location.href = 'home.html';
    //     } catch (error) {
    //         alert('登录失败！');
    //     }
    // });



    function updateSignInAction() {
        var form = document.querySelector("#sign-in-form");
        var userType = document.querySelector('input[name="t1"]:checked');
        if (!userType) {
            alert("请选择登录类型");
            return;
        }
        if (userType.value === "用户") {
            form.action = "./api/login/user";
        } else if (userType.value === "管理员") {
            form.action = "./api/login/admin";
        }
        form.submit();
    }

</script>
<script>


    const usernameInput = document.querySelector('#username-sign-in');
    const passwordInput = document.querySelector('#password-sign-in');

    const loginForm = document.querySelector('#sign-in-form');


    loginForm.addEventListener('submit',  async function (e) {
        e.preventDefault();
        // 获取输入的用户名和密码
        var username = usernameInput.value;
        var password = passwordInput.value;

        var selectedOption = document.querySelector('input[name="t1"]:checked');
        if (!selectedOption) {
            alert("请选择登录类型");
            return;
        }

        var loginUrl = '';

        if (selectedOption.value === '管理员') {
            loginUrl = './api/login/admin';
        } else {
            loginUrl = './api/login/customer';
        }

        try {
            const response = await axios.post(loginUrl, { username, password });
            alert('登录成功！');
            window.location.href = 'home.html';
        } catch (error) {
            alert('登录失败！');
        }
    });
</script>
<script>
    function updateSignInAction() {
        var form = document.querySelector("#sign-in-form");
        var userType = document.querySelector('input[name="t1"]:checked');
        if (!userType) {
            alert("请选择登录类型");
            return;
        }
        if (userType.value === "用户") {
            form.action = "./api/login/user";
        } else if (userType.value === "管理员") {
            form.action = "./api/login/admin";
        }
    }

</script>
<style>
    .error-message {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 5px;
        background-color: #fff;
        color: black;
    }
</style>
<div id="passwordError" class="error-message"></div>




<input onkeyup="checkPwdMatch()"/>
<script>
    function checkPwdMatch() {
        var password = $('#password-sign-up').val();
        var confirmPwd = $('#confirmPassword-sign-up').val();

        if (password !== confirmPwd) {
            $("#passwordError").fadeIn().text("密码不匹配");
        } else {
            $("#passwordError").fadeOut().text("");
        }

    }

</script>
<style>
    .homepage {
        margin-top:10px;
        background-color: #EEEEEE;
    }
</style>



<div class="homepage" th:fragment="homepage" style="margin-top:10px;background-color: #EEEEEE">
    <nav class="nav nav-tabs" >
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">汽车出借系统</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/customer_personal" style="color: #000000">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;
                    </a>
                </li>
                <li>
                    <a href="/cars/customer_detail">
                        <span th:text="个人中心" class="glyphicon glyphicon-log-in"></span>&nbsp;退出
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

<!---$$$$$$$---line----$$$$$$$$-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人信息</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap');

    /* reset styles */
    html, body, header, nav, section, footer, div, ul, li, table, tbody, tr, td {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-family: 'Noto Sans SC', sans-serif;
        vertical-align: baseline;
    }

    /* navbar styles */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .navbar-brand {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
    }

    .navbar-menu {
        display: flex;
        gap: 30px;
    }

    .navbar-menu a {
        font-size: 18px;
        color: #333;
        text-decoration: none;
    }

    .navbar-menu a:hover {
        color: orange;
    }

    /* section styles */
    section {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f7f7f7;
    }

    .tit_wrap {
        text-align: center;
        margin-bottom: 50px;
    }

    .tit_wrap h1 {
        font-size: 48px;
        color: #333;
        margin-top: 80px;
    }

    .scissors {
        width: 80px;
        height: 2px;
        background-color: #FFA500;
        margin: 20px auto 40px;
    }

    .myinfo {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #fff;
        padding: 50px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        padding: 10px;
        font-size: 18px;
        color: #333;
        border-bottom: 1px solid #ccc;
    }

    td:first-child {
        width: 120px;
    }

    td:nth-child(even) {
        text-align: right;
    }

    td:last-child {
        border: none;
    }

    table img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 30px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        border: 2px solid #fff;
    }

    ul {
        list-style: none;
        font-size: 18px;
        color: #333;
        line-height: 2;
        text-align: center;
    }

    footer {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        color: #999;
        font-size: 16px;
        margin-top: 60px;
        border-top: 1px solid #ccc;
    }

</style>
<body>

<nav class="navbar">
    <a class="navbar-brand" href="#">徐纯宇</a>
    <div class="navbar-menu">
        <a href="#page2">基本资料</a>
        <a href="#page3">专业技能</a>
        <a href="#page4">教育经历</a>
        <a href="#page5">工作经验</a>
    </div>
</nav>

<section class="page_two" id="page2">
    <div class="con_wrap">
        <div class="tit_wrap">
            <h1 style="font-weight: bold;">基本资料</h1>
            <div class="scissors"></div>
            <h2>毕业于北京理工大学的计算机应用专业。从业十年有余，熟悉C#和Java前后端开发，熟悉oracle和mysql数据库，熟悉Html和js及css前端开发，熟悉uniapp跨平台开发小程序和app。</h2>
        </div>
        <div class="myinfo">
            <table>
                <tbody>
                <tr>
                    <td rowspan="6">
                        <img src="https://picsum.photos/id/237/200">
                    </td>
                    <td>姓名</td>
                    <td>徐纯宇</td>
                    <td>手机</td>
                    <td>13300000000</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>男</td>
                    <td>邮箱</td>
                    <td>1376174032@qq.com</td>
                </tr>
                <tr>
                    <td>出生</td>
                    <td>1992.02.20</td>
                    <td>QQ号</td>
                    <td>1376174032</td>
                </tr>
                <tr>
                    <td>居住</td>
                    <td>北京市海淀区</td>
                    <td>户籍</td>
                    <td>北京市海淀区</td>
                </tr>
                <tr>
                    <td>学历</td>
                    <td>本科</td>
                    <td>学校</td>
                    <td>北京理工大学</td>
                </tr>
                <tr>
                    <td>专业</td>
                    <td colspan="3">计算机应用</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="down_arrow">
        <a href="#page3" class="scroll"><span></span></a>
    </div>
</section>

<section class="page_three" id="page3">
    <div class="con_wrap">
        <div class="tit_wrap">
            <h1 style="font-weight: bold;">专业技能</h1>
            <div class="scissors"></div>
        </div>
        <div class="myinfo">
            <ul>
                <li>C# 和 Java 前后端开发</li>
                <li>Oracle 和 MySQL 数据库</li>
                <li>HTML、CSS 和 JavaScript 前端开发</li>
                <li>uniapp 跨平台开发小程序和 App</li>
            </ul>
        </div>
    </div>
    <div class="down_arrow">
        <a href="#page4" class="scroll"><span></span></a>
    </div>
</section>

<section class="page_four" id="page4">
    <div class="con_wrap">
        <div class="tit_wrap">
            <h1 style="font-weight: bold;">教育经历</h1>
            <div class="scissors"></div>
        </div>
        <div class="myinfo">
            <ul>
                <li>北京理工大学，计算机应用专业，本科</li>
            </ul>
        </div>
    </div>
    <div class="down_arrow">
        <a href="#page5" class="scroll"><span></span></a>
    </div>
</section>

<section class="page_five" id="page5">
    <div class="con_wrap">
        <div class="tit_wrap">
            <h1 style="font-weight: bold;">工作经验</h1>
            <div class="scissors"></div>
        </div>
        <div class="myinfo">
            <ul>
                <li>XXX 公司，Java 开发工程师，2018.01-至今</li>
                <li>XXX 公司，C# 开发工程师，2013.07-2017.12</li>
            </ul>
        </div>
    </div>
</section>

<footer>
    <p>© 2021 徐纯宇 All Rights Reserved</p>
</footer>

<script src="js/main.js"></script>
</body>
<script>
    // Smooth scroll to section on page load
    window.onload = function () {
        if (window.location.hash) {
            var hash = window.location.hash.substring(1);
            smoothScrollTo(hash);
        }
    }

    // Smooth scroll to section on click
    var links = document.querySelectorAll('.scroll');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function (event) {
            event.preventDefault();
            var href = this.getAttribute('href').substring(1);
            smoothScrollTo(href);
        });
    }

    // Smooth scroll to section
    function smoothScrollTo(target) {
        var targetPosition = document.getElementById(target).offsetTop - 80;
        var startPosition = window.pageYOffset;
        var distance = targetPosition - startPosition;
        var duration = 500;
        var start = null;

        window.requestAnimationFrame(step);

        function step(timestamp) {
            if (!start) start = timestamp;
            var progress = timestamp - start;
            var percentage = Math.min(progress / duration, 1);
            window.scrollTo(0, startPosition + distance * percentage);
            if (progress < duration) window.requestAnimationFrame(step);
        }
    }

</script>
</html>
